<template>
  <div class="app-container">
    <el-table
      :data="usersData"
      style="width: 100%"
    >
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
      />
      <el-table-column
        prop="name"
        label="名称"
        width="180"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        width="180"
      />
      <el-table-column
        prop="created_at"
        label="创建日期"
        width="180"
      />

    </el-table>

  </div>
</template>

<script>
import { toggleClass } from '@/utils'
import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
import { getUsers } from '@/api/user'

export default {
  name: 'Theme',
  data() {
    return {
      theme: false,
      usersData: [],
      slideValue: 50,
      radio: 3
    }
  },
  watch: {
    theme() {
      toggleClass(document.body, 'custom-theme')
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      const res = await getUsers()
      this.usersData = res.dat
      // this.routes = this.generateRoutes(res.data)
    }
  }
}
</script>

<style scoped>
.field-label{
  vertical-align: middle;
}
.box-card {
  width: 400px;
  max-width: 100%;
  margin: 20px auto;
}

.block {
  padding: 30px 24px;
}

.tag-item {
  margin-right: 15px;
}
</style>
